{"componentChunkName":"component---src-templates-blog-post-js","path":"/css/vertical-aline/","result":{"data":{"site":{"siteMetadata":{"title":"Tory","author":"[Tory]","siteUrl":"https://gatsby-starter-bee.netlify.com","comment":{"disqusShortName":"","utterances":"JaeYeopHan/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"b314fc2d-b35b-5c4f-b49c-520812f2e17a","excerpt":"vertical-align 오늘을 css prop 중 vertical-align에 대해 심플하게 알아보자. vertical-aline은 mdn에서 display가 inline, inline-block, table-cell인 경우에 세로 방향의 line 정렬을 위해 사용할 수 있다고 소개한다. (즉, block level elements는 사용할 수 없음!) 그리고 정렬되는 기준이 조금 까다로운데 크게는 아래처럼 두 가지 경우로 정렬 기준을 나눌 수 있다. inline(inline, inline…","html":"

vertical-align

\n

오늘을 css prop 중 vertical-align에 대해 심플하게 알아보자.

\n

vertical-aline은 mdn에서 display가 inline, inline-block, table-cell인 경우에 세로 방향의 line 정렬을 위해 사용할 수 있다고 소개한다. (즉, block level elements는 사용할 수 없음!)

\n

그리고 정렬되는 기준이 조금 까다로운데 크게는 아래처럼 두 가지 경우로 정렬 기준을 나눌 수 있다.

\n\n

이 중에 오늘은 inline elements에 대해서 알아볼 것이다.

\n

vertical align의 Values

\n

vertical align에는 다양한 value를 지정할 수 있는데,\nvalue에 따라서 부모 요소에 영향을 받는 것과, line box에 영향을 받는 value로 분류된다.

\n

Values for inline elements

\n

Parent-relative values

\n

아래의 값들은 정렬시 부모 요소에 영향을 받는다.

\n\n

Line-relative values

\n

아래의 값들은 Line에 영향을 받는다.

\n\n
\n

baseline이 없는 경우 bottom margin이 baseline이 된다.

\n
\n

test

\n
<p\n  style=\"\n    background: bisque;\n\"\n>\n  <span>baseline</span>\n  <span style=\"vertical-align: top\">top</span>\n  <span style=\"vertical-align: middle\">middle</span>\n  <span style=\"vertical-align: bottom\">bottom</span>\n  <span style=\"vertical-align: super\">super</span>\n  <span style=\"vertical-align: sub\">sub</span>\n  <span\n    style=\"\n    display: inline-block;\n    height: 100px;\n    width: 100px;\n    background: azure;\n\"\n    >test inline element</span\n  >\n</p>
\n
\n \n